<template>
  <div class="content">
    <div class="touch-content">
      <div class="common-head">
        <div class="common-sub-title">
          <img src="~assets/img/icon_detail.png" alt="培育统计">
          <span>量碰说明</span>
        </div>
      </div>
      <div class="rule-descr">
        <div class="rule-descr-title">
          <ol>
            <li>直推2人，可量碰2层，直推3人，可量碰3层，直推4人，可量碰4层...直推6人，可量碰全部。</li>
            <li>每个下级点位只能量碰一次。</li>
            <li>根据不同用户的级别，对应不同的量碰规则。</li>
            <li>算法：
              <p>量碰奖  = 量碰总金额  *  提成比例 *  PV</p>
              <p>量碰总金额:自己伞下，左区办卡总额与右区办卡总额进行比较，小数为量碰总金额。PV=0.7</p>
              </li>
          </ol>
        </div>
        <div class="rule-two">
          <div class="common-head">
            <div class="common-sub-title">
              <img src="~assets/img/icon_detail.png" alt="培育统计">
              <span>量碰说明</span>
            </div>
          </div>
        </div>
        <div class="rule-list tc">
          <ul class="rule-list-title">
            <li>级别</li>
            <li>量碰总金额</li>
            <li>提成比例</li>
            <li>超过规定总金额(提成比例)</li>
          </ul>
          <div class="rule-list-item">
            <ul>
              <li class="flex-li" v-for="(item, index) in pointList" :key="index"><span v-text="item.level"></span><span v-text="item.num"></span><span v-text="item.num1"></span><span v-text="item.num2"></span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <v-remark></v-remark>
  </div>
</template>

<script>
import remark from 'src/common/remark'
export default {
  components: {
    'v-remark': remark
  },
  data () {
    return {
      pointList: [
        {
          level: 'VIP',
          num: '24000',
          num1: '30%',
          num2: '12%'
        },
        {
          level: '钻石',
          num: '12000',
          num1: '30%',
          num2: '10%'
        },
        {
          level: '金卡',
          num: '6000',
          num1: '30%',
          num2: '8%'
        },
        {
          level: '银卡',
          num: '3000',
          num1: '30%',
          num2: '6%'
        }
      ]
    }
  }
}
</script>
<style scoped lang='scss'>
  @import '~lib/reset.scss';
  .touch-content {
    background-color: #fff;
    margin-top: 10px;
    .common-head {
      padding: 0 16px;
    }
    .rule-descr {
      .rule-descr-title {
        padding:16px;
        ol {
          list-style: decimal;
          padding: 0 16px;
          li {
            font-size: $font-15;
            line-height: 2;
          }
        }
      }
      .rule-two {
        .common-head {
          border-top: 10px solid #f5f5f5;
          .common-sub-title {
            border-bottom: none;
          }
        }
      }
      .rule-list {
        .rule-list-title {
          display: flex;
          justify-content: center;
          align-items: center;
          border-top: 1px solid #e5e5e5;
          li{
            flex: 1;
            padding: 16px 0;
            &:not(:last-child) {
              border-right: 1px solid #e5e5e5;
            }
          }
        }
      }
    }
  }
</style>
